<template>
  <div class="register">
    <div class="register-bg">
      <img src="../../assets/index-bg.jpg" width="100%" alt="">
    </div>
    <div class="register-main">
      <div class="register-tab h5-hairline--bottom">
        <ul class="cur-flex cur-justify-center">
          <!-- /<li @click="view='LoginAccount'" :class="{'active':view === 'LoginAccount'}">账号登录</li> -->
          <li @click="view='registerCode'" :class="{'active':view === 'registerCode'}">手机号注册</li>
        </ul>
      </div>
      <div class="register-content">
        <transition name="slideRightInLeftOut" mode="out-in">
          <component :is="view"></component>
        </transition>
      </div>
    </div>
  </div>
</template>
<script>
// import LoginAccount from './loginAccount'
import registerCode from './registerCode'
export default {
  components: {
    // LoginAccount,
    registerCode
  },
  data () {
    return {
      loading: false,
      view: 'registerCode'
    }
  },
  methods: {}
}
</script>
<style lang="scss">
.register {
  height: 100%;
  background-color: $white;
  &-main {
    padding: 28px;
  }
  &-tab {
    // border-bottom: 1px solid $border-color;
    li {
      width: 50%;
      font-size: 28px;
      padding: 22px;
      color: $gray-dark;
      font-weight: 500px;
      text-align: center;
    }
    li.active {
      color: $red;
      border-bottom: 2px solid $red;
    }
  }
  &-content{
    margin-top: 20px;
  }
}
</style>
